<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>员工列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Big" style="padding-top:0;">
      <div class="tip">员工列表</div>
      <div class="stafflist">
        <el-container>
          <el-header height="120px">
            <div class="left">
              <div class="date">
                <span>时间范围：</span>
                <el-date-picker
                  v-model="rangedatetime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
              <div class="staffstatus">
                <span>员工状态：</span>
                <el-select v-model="staffstatus" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in staffStatusOptions"
                    :key="index"
                    :label="item.statusName"
                    :value="item.statusCode"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="stafflevel">
                <span>员工等级：</span>
                <el-select v-model="stafflevel" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in staffLevelOptions"
                    :key="index"
                    :label="item.stafflevelvalue"
                    :value="item.stafflevelcode"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="city">
                <span>城市：</span>
                <el-select v-model="cityCode" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in cityandmarketOptions"
                    :key="index"
                    :label="item.cityName"
                    :value="item.cityCode"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="market">
                <span>商圈：</span>
                <el-select
                  v-model="market"
                  placeholder="请选择"
                  :disabled="marketdisabled"
                >
                  <el-option
                    v-for="(item, index) in marketOptions"
                    :key="index"
                    :label="item.businessAreaName"
                    :value="item.businessAreaCode"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="right">
              <div class="usersearch">
                <el-select
                  v-model="usersearch"
                  placeholder="请选择"
                  class="userselect"
                >
                  <el-option
                    v-for="(item, index) in searchOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="searchValue"
                  placeholder="请输入商品名称"
                  class="userinput"
                ></el-input>
              </div>
              <div class="buttons">
                <el-button @click="goToNewly()">新增员工</el-button>
                <el-button
                  @click="download"
                  :disabled="pagination.total == 0 ? true : false"
                  >导出</el-button
                >

                <el-button
                  class="export"
                  @click="searchForUserInformation"
                  style="background-color:#fd804c;color: #fff;"
                  >查询</el-button
                >
                <el-button class="export" @click="clear" type="warning"
                  >清除</el-button
                >
              </div>
            </div>
          </el-header>

          <el-footer height="50px">
            <div class="staffname" style="width:130px;">员工姓名</div>
            <div class="staffmobile">员工手机号</div>
            <div class="stafflevel">员工等级</div>
            <div class="workordernum">累计工单数</div>
            <!-- <div class="praise" style="width:50px;">好评率</div> -->
            <div class="city" style="width:40px;">城市</div>
            <div class="market" style="width:120px;">商圈</div>
            <!-- <div class="gomarketserve">跨商圈服务</div> -->
            <!-- <div class="oknum">可带徒弟数</div> -->
            <div class="hasnum">已有徒弟数</div>
            <div class="staffstatus">员工状态</div>
          </el-footer>
          <el-main>
            <div class="list">
              <div
                v-for="(item, index) in stafflist"
                :key="index"
                class="listone"
              >
                <div class="top">
                  <div class="staffid">员工编号：{{ item.staffCode }}</div>
                  <div class="right">
                    <span
                      style="margin-right:20px;cursor:pointer;color: #fc9e76"
                      @click="goToWorkOrders(item.staffCode)"
                      >查看他的工单</span
                    >
                    <span
                      style="cursor:pointer;color: #fc9e76"
                      @click="goToNewly(item.staffCode)"
                      >查看员工详情</span
                    >
                  </div>
                </div>
                <div class="bottom">
                  <div
                    class="name"
                    style="width:130px;display:flex;align-items:center;"
                  >
                    <img :src="item.avatarAddress" />
                    <div
                      style="width:70px;white-space: wrap;padding-left:10px;"
                    >
                      {{ item.realName }}
                    </div>
                  </div>
                  <div class="phone">{{ item.phone }}</div>
                  <div class="level">{{ item.level + "级" }}</div>
                  <div class="totalWorkOrderCount">
                    {{
                      item.totalWorkOrderCount ? item.totalWorkOrderCount : 0
                    }}
                  </div>
                  <!-- <div class="praiseRate" style="width:50px;">{{parseInt(item.praiseRate) + '%'}}</div> -->
                  <div class="cityName" style="width:40px;">
                    {{ item.cityName }}
                  </div>
                  <div class="businessAreaName" style="width:120px;">
                    {{ item.businessAreaName }}
                  </div>
                  <!-- <div class="isCrossBusinessArea">{{item.isCrossBusinessArea === 0 ? '否' : '是'}}</div> -->
                  <!-- <div class="availablePupilCount">{{item.availablePupilCount ? item.availablePupilCount : 0}}</div> -->
                  <div class="nowPupilCount">
                    {{ item.nowPupilCount ? item.nowPupilCount : 0 }}
                  </div>
                  <div class="workStatus">
                    {{
                      item.workStatus == 0
                        ? "正常"
                        : item.workStatus == 1
                        ? "试用"
                        : "离职"
                    }}
                  </div>
                </div>
                <div class="background"></div>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
      <div class="pagination" v-if="stafflist.length > 0">
        <div class="left"></div>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentpage"
          :page-size="pagination.pagesize"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
      <div class="nolist" v-if="stafflist.length <= 0">暂无数据</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { download } from "../../utils/exportCsv";
export default {
  inject: ["reload"],
  data() {
    const staffStatusOptions = [{ statusCode: "", statusName: "全部" }];
    const staffLevelOptions = [{ stafflevelcode: "", stafflevelvalue: "全部" }];
    const searchOptions = [
      { key: 0, label: "员工姓名" },
      { key: 1, label: "员工手机号" }
    ];
    return {
      rangedatetime: ["", ""],
      staffStatusOptions, // 状态枚举
      staffstatus: "", // 当前状态
      staffLevelOptions, // 等级枚举
      stafflevel: "", // 当前等级
      cityandmarketOptions: [], // 城市和商圈枚举
      cityCode: "", // 当前城市
      market: "", // 当前商圈
      stafflist: [], // 列表
      pagination: {
        total: 0,
        pagesize: 20, // 每页条数
        currentpage: 1 // 当前页
      },
      searchOptions, // 精准搜索下拉框枚举
      usersearch: 0, // 精准搜索的选择
      searchValue: "",
      realName: "", //员工姓名
      phone: "" // 员工手机号
    };
  },
  computed: {
    marketOptions() {
      const marketObj = this.cityandmarketOptions.find(
        item => this.cityCode == item.cityCode
      );
      if (marketObj && marketObj.businessCityInfo) {
        return marketObj.businessCityInfo;
      } else {
        return [
          {
            businessAreaCode: "",
            businessAreaName: "全部"
          }
        ];
      }
    },
    marketdisabled() {
      if (this.cityCode) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    getstaffstatus() {
      // 获取员工状态枚举
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchStaffStatus",
        method: "get"
      }).then(res => {
        this.staffStatusOptions = [];
        this.staffStatusOptions = this.staffStatusOptions.concat(res);
      });
    },
    getstafflevel() {
      // 获取员工等级枚举
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchLevel",
        method: "get"
      }).then(res => {
        //console.log(res)
        // 先重置
        this.staffLevelOptions = [];
        const newarr = [];
        for (let i = 0; i < res.length; i++) {
          const newobj = {};
          newobj.stafflevelcode = res[i];
          newobj.stafflevelvalue = res[i] + "级";
          newarr.push(newobj);
        }
        this.staffLevelOptions = this.staffLevelOptions.concat(newarr);
      });
    },
    getcityAndmarket() {
      // 获取城市和商圈
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchCityAndBusiness",
        method: "get"
      }).then(res => {
        //console.log(res)
        res.forEach(item => {
          item.businessCityInfo.unshift({
            businessAreaCode: "",
            businessAreaName: "全部"
          });
        });
        res.unshift({
          cityCode: "",
          cityName: "全部",
          businessCityInfo: [
            {
              businessAreaCode: "",
              businessAreaName: "全部"
            }
          ]
        });
        this.cityandmarketOptions = res;
      });
    },
    // defaultsearch() {
    //   this.$http({
    //     url: "/staffadmin/homeService/staffManager/fetchStaffList",
    //     method: "get",
    //     params: {
    //       page: 1,
    //       size: this.pagination.pagesize,
    //       startTime: this.rangedatetime[0]
    //         ? moment(this.rangedatetime[0]).format("YYYY-MM-DD HH:mm:ss")
    //         : "",
    //       endTime: this.rangedatetime[1]
    //         ? moment(this.rangedatetime[1]).format("YYYY-MM-DD HH:mm:ss")
    //         : ""
    //     }
    //   }).then(res => {
    //     //console.log(res)
    //     this.stafflist = res.list;
    //     this.pagination.total = res.total;
    //     this.pagination.currentpage = res.pageNum;
    //   });
    // },
    handleCurrentChange(val) {
      // 当前页变化
      this.pagination.currentpage = val;
      this.changestatusSearch(val);
    },
    changestatusSearch(page) {
      if (this.usersearch == 1) {
        this.phone = this.searchValue;
      }
      if (this.usersearch == 0) {
        this.realName = this.searchValue;
      }
      var params = {
        page: page,
        size: this.pagination.pagesize,
        startTime: this.rangedatetime[0]
          ? moment(this.rangedatetime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        endTime: this.rangedatetime[1]
          ? moment(this.rangedatetime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        workStatus: this.staffstatus,
        level: this.stafflevel,
        cityCode: this.cityCode,
        businessAreaCode: this.market,
        realName: this.realName,
        phone: this.phone
      };
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchStaffList",
        method: "get",
        params
      }).then(res => {
        this.stafflist = res.list;
        this.pagination.total = res.total;
        this.pagination.currentpage = res.pageNum;
      });
    },
    searchForUserInformation() {
      this.changestatusSearch(1);
    },
    // //导出
    download() {
      //员工第二版导出功能优化
      var params = {
        page: this.pagination.currentpage,
        size: this.pagination.pagesize,
        startTime: this.rangedatetime[0]
          ? moment(this.rangedatetime[0]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        endTime: this.rangedatetime[1]
          ? moment(this.rangedatetime[1]).format("YYYY-MM-DD HH:mm:ss")
          : "",
        realName: this.realName,
        workStatus: this.staffstatus,
        level: this.stafflevel,
        phone: this.phone,
        cityCode: this.cityCode,
        businessAreaCode: this.market
      };

      if (window.location.host == "hs.xstarlife.com") {
        window.location.href = `https://hs.xstarlife.com/api/staffadmin/homeService/staffManager/fetchStaffListExport?realName=${params.realName}&level=${params.level}&workStatus=${params.workStatus}&startTime=${params.startTime}&endTime=${params.endTime}&businessAreaCode=${params.businessAreaCode}&cityCode=${params.cityCode}&phone=${params.phone}`;
      } else {
        window.location.href = `https://m.goltestarlife.com/staffadmin/homeService/staffManager/fetchStaffListExport?realName=${params.realName}&level=${params.level}&workStatus=${params.workStatus}&startTime=${params.startTime}&endTime=${params.endTime}&businessAreaCode=${params.businessAreaCode}&cityCode=${params.cityCode}&phone=${params.phone}`;
      }
    },

    // download() {
    //   // 列表导出
    //   this.$http({
    //     url: "/staffadmin/homeService/staffManager/fetchStaffList",
    //     method: "get",
    //     params: {
    //       page: 1,
    //       size: this.pagination.total
    //     }
    //   }).then(res => {
    //     const { list } = res;
    //     const fileName = "员工列表.csv";
    //     const fields = [
    //       "员工编号",
    //       "员工头像",
    //       "员工姓名",
    //       "员工手机号",
    //       "员工等级",
    //       "累计工单数",
    //       "好评率",
    //       "城市",
    //       "商圈",
    //       "跨商圈服务",
    //       "可带徒弟数",
    //       "已有徒弟数",
    //       "员工状态"
    //     ];
    //     list.forEach(item => {
    //       item["员工编号"] = item.staffCode;
    //       item["员工头像"] = item.avatarAddress;
    //       item["员工姓名"] = item.realName;
    //       item["员工手机号"] = item.phone;
    //       item["员工等级"] = item.level + "级";
    //       item["累计工单数"] = item.totalWorkOrderCount;
    //       item["好评率"] = parseInt(item.praiseRate) + "%";
    //       item["城市"] = item.cityName;
    //       item["商圈"] = item.businessAreaName;
    //       if (item.isCrossBusinessArea == 0) {
    //         item["跨商圈服务"] = "否";
    //       }
    //       if (item.isCrossBusinessArea == 1) {
    //         item["跨商圈服务"] = "是";
    //       }
    //       item["可带徒弟数"] = item.availablePupilCount;
    //       item["已有徒弟数"] = item.nowPupilCount;
    //       switch (item.workStatus) {
    //         case "0":
    //           item["员工状态"] = "正常";
    //           break;
    //         case "1":
    //           item["员工状态"] = "试用";
    //           break;
    //         case "2":
    //           item["员工状态"] = "离职";
    //           break;
    //       }
    //     });
    //     download(list, fields, fileName);
    //   });
    // },
    goToNewly(staffCode) {
      this.reload();
      this.$router.push({
        path: "/newly",
        query: {
          staffCode
        }
      });
    },
    goToWorkOrders(staffCode) {
      this.reload();
      this.$router.push({
        path: "/workorderlist",
        query: {
          staffCode: staffCode
        }
      });
    },
    clear() {}
  },
  mounted() {},
  activated() {
    this.getstaffstatus();
    this.getstafflevel();
    this.getcityAndmarket();
    // this.defaultsearch(); // 默认搜索前一个月的
    this.changestatusSearch(1);
  },
  watch: {
    cityCode(newvalue) {
      // this.isjingzhun = false;
      // this.searchValue = "";
      if (newvalue == "") {
        this.market = "";
      }
      // this.changestatusSearch(1);
    },
    // market() {
    //   this.isjingzhun = false;
    //   this.searchValue = "";
    //   this.changestatusSearch(1);
    // },
    rangedatetime(newvalue) {
      // this.isjingzhun = false;
      // this.searchValue = "";
      if (newvalue == null) {
        this.rangedatetime = ["", ""];
      }
      // this.changestatusSearch(1);
    }
    // staffstatus() {
    //   this.isjingzhun = false;
    //   this.searchValue = "";
    //   this.changestatusSearch(1);
    // },
    // stafflevel() {
    //   this.isjingzhun = false;
    //   this.searchValue = "";
    //   this.changestatusSearch(1);
    // },
    // searchValue(newvalue) {
    //   if (this.usersearch == 0) {
    //     this.realName = newvalue;
    //   }
    //   if (this.usersearch == 1) {
    //     this.phone = newvalue;
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.stafflist {
  border-radius: 5px;
  background-color: #ebeef1;
  box-sizing: border-box;
  padding: 10px;
  padding-bottom: 0px;
  min-height: 100px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.el-container {
  // min-height: 512px;
}
.el-header {
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  font-size: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .left {
    width: 700px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    .date {
      margin-bottom: 10px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      /deep/ .el-range-editor.el-input__inner {
        box-sizing: border-box;
        height: 30px;
        width: 320px;
      }
      /deep/ .el-icon-time:before {
        position: relative;
        top: -6px;
      }
      /deep/ .el-range-separator {
        width: 24px;
        height: 26px;
        line-height: 26px;
      }
    }
    .staffstatus,
    .stafflevel,
    .city,
    .market {
      margin-bottom: 10px;
      position: relative;
      /deep/ .el-input--suffix .el-input__inner {
        box-sizing: border-box;
        height: 30px;
        width: 90px;
      }
      /deep/ .el-icon-arrow-up:before {
        position: absolute;
        top: -5px;
      }
    }
    .city {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .right {
    width: 410px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    .usersearch {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      position: relative;
      /deep/ .userselect {
        box-sizing: border-box;
        height: 30px;
        width: 100px;
      }
      /deep/ .userselect .el-input__inner {
        box-sizing: border-box;
        height: 30px;
        width: 100px;
        border-right: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
      }
      /deep/ .userselect .el-icon-arrow-up:before {
        position: absolute;
        top: -5px;
      }
      .userinput {
        width: 150px;
        height: 30px;
        box-sizing: border-box;
        /deep/ .el-input__inner {
          width: 150px;
          height: 30px;
          box-sizing: border-box;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 0px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
      }
      .userbutton {
        width: 56px;
        height: 30px;
        box-sizing: border-box;
        border-left: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        position: relative;
        /deep/ .el-icon-search:before {
          position: absolute;
          top: 7px;
          left: 20px;
        }
      }
    }
    .buttons {
      .el-button {
        width: 80px;
        height: 30px;
        padding: 0px;
        box-sizing: border-box;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
.el-footer {
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  font-weight: 700;
  div {
    // text-align: center;
    width: 80px;
  }
}
.el-main {
  margin-top: 10px;
  background-color: #ebeef1;
  // padding: 15px;
  padding: 0px;
  .list {
    font-size: 12px;
    .staffid {
      color: rgba(0, 0, 0, 0.5);
    }
    .top {
      // padding-left: 15px;
      // padding-right: 15px;
      margin-left: 15px;
      margin-right: 15px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef1;
      .right {
        color: #ebeef1;
        text-decoration: underline;
      }
    }
    .bottom {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      min-height: 80px;
      // height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .name {
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
        }
      }
      .name,
      .phone,
      .level,
      .totalWorkOrderCount,
      .praiseRate,
      .cityName,
      .businessAreaName,
      .isCrossBusinessArea,
      .availablePupilCount,
      .nowPupilCount,
      .workStatus {
        width: 80px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.listone {
  // margin-bottom: 10px;
  background-color: #fff;
}
.background {
  width: 100%;
  height: 10px;
  background-color: #ebeef1;
}
.pagination {
  padding: 0 15px;
  font-size: 14px;
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nolist {
  line-height: 40px;
  width: 100%;
  height: 40px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  background-color: #fff;
}
.Big {
  background-color: #fff;
  padding: 10px;
}
.tip {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
</style>
